import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Form, Input, Button, Modal, Typography, Select, Table, Tag, Space, Popconfirm, Tooltip } from "antd"
import { UploadOutlined, DownloadOutlined, FormOutlined, DeleteOutlined, FolderViewOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { baseURL } from '../../api/request';
import banner from '../../mobx/store/banner';
import { observer } from 'mobx-react'


const { Title } = Typography


const { Column, ColumnGroup } = Table;

function Shuffling() {

    const { bannerList, changebannerList, vipgetbannerList } = banner

    useEffect(() => {
        changebannerList({})
    }, [])

    console.log(bannerList);

    const ufile: any = useRef()

    const [form] = Form.useForm()
    const [imgSrc, setImgSrc] = useState<any>(null)



    const [show, setShow] = useState<boolean>(false)


    const gotoAnnoDetail = () => {

    }

    const gotoEditAnno = (item: any) => {
        console.log(item._id);




    }
    const confirm = async (item: any) => {
        let { code, result }: any = await ajax.deletebanner({
            _id: item._id
        })
        if (code == 200) {
            var list = bannerList.filter((val: any) => val._id != item._id)
            vipgetbannerList(list)
        }



    }

    const oncbanner = () => {
        setShow(true)
    }


    const conformSet = async () => {
        const data = form.getFieldsValue()
        console.log(data);

        let { code, result }: any = await ajax.banner(data)
        if (code == 200) {
            setShow(false)
            var list = bannerList.filter((val: any) => val._id != data._id)
            vipgetbannerList(list)
        }
    }

    const handleCancel = () => {
        setShow(false)
    }

    const startUploadeFile = async () => {
        const file = ufile.current.files[0]
        const data = new FormData()
        data.append("file", file)
        let { code, result, path }: any = await ajax.uploadfile(data)
        if (code == 200) {
            setImgSrc(path)
            form.setFieldsValue({ img: path })
        }
    }
    const handleClickUpload = () => {
        ufile.current.click()
    }
    return (
        <div style={{ height: "100%" }}>
            <Title level={2} style={{ color: "rgba(255,255,255,1)" }}>轮播管理</Title>
            <Row>
                <Col>
                    <Button type="primary" onClick={oncbanner}>新增</Button>
                </Col>
            </Row>
            <Row style={{ marginTop: 30 }}>
                <Col span={20}>
                    <Table
                        dataSource={bannerList}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={(item: any) => item._id}
                    >

                        <Column
                            title="#"
                            align='center'
                            render={(text, item, index) => (
                                <b>{index + 1}</b>
                            )}
                            width={40}

                        />
                        <Column title="轮播名称" align='center' dataIndex="name" key="name"
                            render={(text) => (
                                <b>{text}</b>
                            )}
                            width={200}
                        />
                        <Column title="图片图片" align='center' dataIndex="img" key="img"
                            render={(text) => (
                                <img style={{ width: "100%", height: '150px' }} alt="example" src={text.replace(/public/, baseURL)}></img>


                            )}
                        />



                        <Column
                            title="操作"
                            align='center'
                            render={(text, item: any, index: any) => (
                                <div>
                                    <Popconfirm
                                        title="你真的要删除吗?"
                                        onConfirm={() => confirm(item)}
                                        okText="确定"
                                        cancelText="不了"

                                    >
                                        <Button danger shape="circle" icon={<DeleteOutlined />} size="small" />
                                    </Popconfirm>
                                    {/* <Tooltip placement="top" title={'编辑'} style={{ padding: "20px" }}>
                                        <Button type="primary" onClick={() => gotoEditAnno(item)} shape="circle" icon={<FormOutlined />} size="small" />
                                    </Tooltip> */}


                                </div>
                            )}
                            width={100}
                        />


                    </Table>
                </Col>
            </Row>

            <Modal
                title={"轮播图添加 "}
                visible={show}
                onOk={conformSet}
                onCancel={handleCancel}
                okText="添加"
                okType="danger"
                width={'60%'}
                cancelText="取消"
            >
                <Form
                    name="basic"
                    labelCol={{ span: 24 }}
                    initialValues={{
                        password: "qwe123"
                    }}
                    autoComplete="off"
                    form={form}
                    style={{ height: "100%" }}
                >

                    <Form.Item
                        label="轮播图标题"
                        name="name"
                        rules={[{ required: true, message: '请输入轮播图标题!' }]}
                    >
                        <Input placeholder="请输入轮播图标题" />
                    </Form.Item>

                    <Form.Item
                        name="img"
                        rules={[
                            { required: true, message: '请上传公告图片!' },
                        ]}
                    >
                        {/* 上传图片  */}
                        <input type="file" ref={ufile} style={{ display: "none" }} onChange={startUploadeFile} />
                        <Button type="primary" onClick={handleClickUpload} icon={<UploadOutlined />}>{imgSrc ? '替换' : '上传'}描述图片</Button>
                        {
                            imgSrc && <img src={imgSrc.replace(/public/, baseURL)} alt="" style={{ width: '100%', height: 180, borderRadius: "6px", margin: "10px 0" }} />
                        }
                    </Form.Item>
                </Form>

            </Modal>


        </div>
    )
}

export default observer(Shuffling)